<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;border:solid 1px black;margin: 20px auto;font-size: 80px;line-height:200px;text-align: center;}
        .control{display: flex;justify-content: center;}
    </style>
</head>
<body>
    <div class="box">3</div>
    <div class="control">
        <input type="button" id="start" value="开始">
        <input type="button" id="stop" value="停止">
        <input type="button" id="reset" value="复位">
    </div>
</body>
<script>
    // 1. 选择器
    var box = document.querySelector(".box");
    var start = document.getElementById("start");
    var stop = document.getElementById("stop");
    var reset = document.getElementById("reset");

    // 初始各个按钮的状态
    stop.disabled = "disabled";
    reset.disabled = "disabled";

    // 12. 提前保存初始值，准备用作复位
    var num = box.innerHTML-0;

    // 4. 将计时器的返回值变量，声明成全局
    var t;

    // 2. 开始的点击事件
    start.onclick = function(){
        // 5. 开启计时器之前先清除计时器，防止多次点击重复开启计时器
        clearInterval(t);
        // 3. 开启计时器
        t = setInterval(function(){
            // 6. 判断数字是否到终点，如果到终点了
            if(box.innerHTML == 1){
                // 清除计时器
                clearInterval(t);
                // 10. 数字设置为0
                box.innerHTML = 0;
                // 10. 禁用停止
                stop.disabled = "disabled";
                // 10. 启用复位
                reset.disabled = "";
            }else{
                // 7. 没到终点，减一再设置回去
                box.innerHTML--;
            }
        }, 1000);
        // 8. 点击开始后，禁用开始
        start.disabled = "disabled";
        // 启用停止
        stop.disabled = "";
    }

    // 9. 停止的点击事件
    stop.onclick = function(){
        // 清除计时器
        clearInterval(t);
        // 启动开始
        start.disabled = "";
        // 禁用停止
        stop.disabled = "disabled";
    }

    // 11. 复位的点击事件
    reset.onclick = function(){
        // 设置初始值
        box.innerHTML = num;
        // 启用开始
        start.disabled = "";
        // 禁用复位
        reset.disabled = "disabled";
    }
    
</script>
</html>